<template>
	<view class="">
		<u-form :model="form" ref="uForm_2" label-position="top" :label-style="labelStyle">
			<view class="form-title">个人信息</view>
			<view class="u-p-x-30">
				<u-form-item label="姓名" prop="legal_name">
					<u-input v-model="form.legal_name" placeholder="请填写姓名"/>
				</u-form-item>
				<u-form-item label="身份证号码" prop="legal_cert_no">
					<u-input v-model="form.legal_cert_no" placeholder="请填写身份证号码"/>
				</u-form-item> 
				<u-form-item label="身份证有效期开始日期" prop="legalCertStartDate">
          <view style="width: 100%;" @click="legalCertStartShow = true">
					  <u-input style="pointer-events: none" v-model="form.legalCertStartDate" type="select" placeholder="请选择身份证有效期开始日期" />
          </view>
				</u-form-item>
				<u-form-item label="身份证有效期类型" prop="legal_cert_validity_type">
					<u-radio-group v-model="form.legal_cert_validity_type" @change="radioChange('legal_cert_validity_type')">
						<u-radio :name="0" active-color="#FE572A"> 非长期有效 </u-radio>
						<u-radio :name="1" active-color="#FE572A"> 长期有效 </u-radio>
					</u-radio-group>
				</u-form-item>
				<view v-show="form.legal_cert_validity_type == 0">
					<u-form-item label="身份证有效期结束日期" prop="legalCertEndDate">
            <view style="width: 100%;" @click="legalCertEndShow = true">
              <u-input style="pointer-events: none" v-model="form.legalCertEndDate" type="select" placeholder="请选择身份证有效期结束日期" />
            </view>
					</u-form-item>
				</view>
				<u-form-item label="身份证地址" prop="legal_addr">
					<u-input v-model="form.legal_addr" placeholder="请填写身份证地址"/>
				</u-form-item>
				<u-form-item label="身份证国徽面" prop="card_behind_image">
					<u-upload @on-choose-complete="uploadSuccess" index="card_behind_image" :file-list="log.card_behind_image ? [{url:log.card_behind_image}] : []" ref="uUpload2" max-count="1" :max-size="2 * 1024 * 1024" width="150" height="150"></u-upload>
				</u-form-item>
				<u-form-item label="身份证人像面" prop="card_front_image">
					<u-upload @on-choose-complete="uploadSuccess" index="card_front_image" :file-list="log.card_front_image ? [{url:log.card_front_image}] : []" ref="uUpload3" max-count="1" :max-size="2 * 1024 * 1024" width="150" height="150"></u-upload>
				</u-form-item>
			</view>
		</u-form>
		<u-picker mode="time" v-model="legalCertStartShow" @confirm="legalCertStartChange" :params="{year: true,month: true,day: true,hour: false,minute: false,second: false}"></u-picker>
		<u-picker mode="time" v-model="legalCertEndShow" @confirm="legalCertEndChange" :params="{year: true,month: true,day: true,hour: false,minute: false,second: false}"></u-picker>
		<view class="bg-white">
			<view class="flex align-center justify-evenly u-p-30">
				<dy-button width="250rpx" size="default" color="#FE572A" backgroundColor="#fff" borderColor="#FE572A" @click="back">上一步</dy-button>
				<dy-button width="250rpx" size="default" @click="submit">下一步</dy-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapActions } from 'vuex'
	export default {
		name:'Step2',
		data() {
			return {
				legalCertStartShow: false,
				legalCertEndShow: false,
				form: {
					legal_name:'',
					legal_cert_validity_type:0,
					legalCertStartDate:'',
					legal_cert_begin_date:'',
					legalCertEndDate:'',
					legal_cert_end_date:'',
					legal_cert_no:'',
					legal_addr:'',
					card_behind_image:'',
					card_front_image:'',
				},
				rules: {
					legal_name: [{required: true,message: '请填写姓名',trigger: ['blur', 'change']}],
					legal_cert_no: [{required: true,message: '请填写身份证号码',trigger: ['blur', 'change']}],
					legal_addr: [{required: true,message: '请填写身份证地址',trigger: ['blur', 'change']}],
				},
				labelStyle:{
					fontSize: '28rpx',
					fontWeight:'bold',
				},
				log:{}
			}
		},
		props: {
			logData: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		async mounted() {
			this.$refs.uForm_2.setRules(this.rules);
			this._applyIndex()
		},
		methods: {
			...mapActions({ upload:'user/upload' }),
			submit(){
				this.$refs.uForm_2.validate(valid => {
					if (valid) {
						let files2 = this.$refs.uUpload2.lists
						if(!files2.length) return this.$u.toast('请上传身份证国徽面', 2000)
						let files3 = this.$refs.uUpload3.lists
						if(!files3.length) return this.$u.toast('请上传身份证人像面', 2000)
						uni.setStorageSync('applyForm_2', this.form)
						this.$emit('submit', this.form);
					}
				});
			},
			_applyIndex() {
				if(JSON.stringify(this.logData) === '{}'){
					let applyForm = uni.getStorageSync('applyForm_2')
					if(applyForm){
						Object.keys(this.form).forEach(key => {
							if (applyForm.hasOwnProperty(key)) {
								this.form[key] = applyForm[key];
							}
						})
						this.log = applyForm
					}
				}else{
					Object.keys(this.form).forEach(key => {
						if (this.logData.hasOwnProperty(key)) {
							this.form[key] = this.logData[key];
						}
					})
					this.log = this.logData
				}
				this.form.legalCertStartDate = this.log.legalCertStartDate || this.log.legal_cert_begin_date || ''
				this.form.legalCertEndDate = this.log.legalCertEndDate || this.log.legal_cert_end_date || ''
			},
			back(){
				this.$emit('back');
			},

			legalCertStartChange(e) {
				this.form.legalCertStartDate = e.year + '-' + e.month + '-' + e.day
				this.form.legal_cert_begin_date =  e.year + e.month + e.day
			},
			legalCertEndChange(e) {
				this.form.legalCertEndDate = e.year + '-' + e.month + '-' + e.day
				this.form.legal_cert_end_date =  e.year + e.month + e.day
			},
			radioChange(type){
				if(type=='license_validity_type'){
					this.form.licenseStartDate = ''
					this.form.license_begin_date =  ''
					this.form.licenseEndDate = ''
					this.form.license_end_date =  ''
				}else{
					this.form.legalCertStartDate = ''
					this.form.legal_cert_begin_date =  ''
					this.form.legalCertEndDate = ''
					this.form.legal_cert_end_date =  ''
				}
			},
			uploadSuccess(files, name){
				this.upload(files).then(res=> {
					if(res.length>0) {
						this.form[name] = this.$_BASE_IMG_API + res[0]
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	
	.form-title{
		font-size: 36rpx;
		font-weight: bold;
		margin: 10rpx 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 6rpx solid #c7c7c7;
	}
</style>